<template>
	<view class="wanlshop-container" :style="{
		backgroundSize : '100% auto',
		backgroundImage : 'url(' + $wanlshop.oss('/uploads/20231031/f6d9ac3243ecbc2d416770bd29717761.png', 0, 50, 1, 'transparent', 'png') + ')'
		}">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed"
				:style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px', }">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
			</view>
		</view>
		<view class="container" :style="{height:`calc(100% - ${$wanlshop.wanlsys().height}px)`}">
			<image :src="$wanlshop.oss('/uploads/staticImage/img/logo.png')" mode="widthFix"></image>
			<form @submit="login" @reset="formReset">
				<view class="tab">
					<view v-if="!ifRegister" class="item" :class="{cur:type == 1}" @tap="type = 1;event = 'mobilelogin'">
						<button form-type="reset" ref="resrtBtn">登录</button>
						<view style="height: 27rpx;">
							<image v-show="type == 1" :src="$wanlshop.oss('/uploads/staticImage/images/user/cicle.png')" mode="widthFix"></image>
						</view>
					</view>
					<view class="item" :class="{cur:type == 1}" @tap="type = 2;event = 'register'">
						<button form-type="reset" ref="resrtBtn">注册</button>
						<view style="height: 27rpx;">
							<image v-show="type == 2" :src="$wanlshop.oss('/uploads/staticImage/images/user/cicle.png')" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="form">
					<view class="item">
						<view class="title">
							<image :src="$wanlshop.oss('/uploads/staticImage/restaurant/common/phone.png')" mode="widthFix"></image>
							<text>手机号</text>
						</view>
						<view class="input">
							<input v-model="account" confirm-type="next" name="account" maxlength="11" type="number"
								placeholder="请输入手机号" placeholder-class="placeholder-class">
						</view>
					</view>
					<view class="item" v-if="loginType == 1 || type == 2">
						<view class="title">
							<image :src="$wanlshop.oss('/uploads/staticImage/images/user/password.png')" mode="widthFix"></image>
							
							<text>密码</text>
						</view>
						<view class="input">
							<input password="true" confirm-type="done" type="text" placeholder="请输入登录密码"
								placeholder-class="placeholder-class" name="password" v-model="password">
						</view>
					</view>
					<!-- <view class="item" v-if="type == 2">
						<view class="title">
							<image :src="$wanlshop.oss('/uploads/staticImage/images/user/password.png')" mode="widthFix"></image>
							<text>支付密码</text>
						</view>
						<view class="input">
							<input password="true" confirm-type="done" type="text" placeholder="请输入登录密码"
								placeholder-class="placeholder-class" name="pay_pass" v-model="pay_pass">
						</view>
					</view> -->

					<view class="item" v-if="loginType == 2 || type == 2">
						<view class="title">
							<image :src="$wanlshop.oss('/uploads/staticImage/images/user/code.png')" mode="widthFix"></image>
							
							<text>验证码</text>
						</view>
						<view class="input flex justify-between align-center">
							<input v-model="code" type="text" placeholder="请输入验证码"
								placeholder-class="placeholder-class" maxlength="6">
							<text v-if="!cTimer" @tap="resend">获取验证码</text>
							<template v-else>
								<text v-if="countdown == 0" @tap="resend">重新发送</text>
								<text v-if="countdown > 0" class="time">{{countdown}}秒后重新发送</text>
								<!-- <text v-if="countdown < 50">没有收到验证码？</text> -->
							</template>
						</view>
					</view>

					<view class="item">
						<view class="title">
							<image :src="$wanlshop.oss('/uploads/staticImage/images/user/invite.png')" mode="widthFix"></image>
							
							<text>邀请码</text>
						</view>
						<view class="input">
							<input type="text" v-model="invite_code" name="invite_code" placeholder="请输入邀请码"
								placeholder-class="placeholder-class" maxlength="6">
						</view>
					</view>

					<view class="tips" v-if="type == 1">
						<button form-type="reset" ref="resrtBtn" v-if="loginType == 2"
							@tap="loginType = 1">密码登录</button>
						<button form-type="reset" ref="resrtBtn" v-if="loginType == 1"
							@tap="loginType = 2">验证码登录</button>
						<text @tap="retrieve">忘记密码</text>
					</view>


					<button form-type="submit" class="btn">{{type == 1 ? '登录' : '注册'}}</button>
				</view>
			</form>

		</view>

	</view>
</template>
<script>
	import graceChecker from '@/common/graceChecker'; //来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	import {
		login
	} from '@/common/fa.mixin.js';
	import md5Libs from "uview-ui/libs/function/md5";
	export default {
		mixins: [login],
		data() {
			return {
				ifRegister: false, // 是否是扫码注册
				type: 1, // 1 登录  2 注册
				loginType: 1, // 1 账号密码  2 验证码
				invite_code: '',
				account: '',
				password: '',
				pay_pass: '',
				submitDisabled: true,
				countdown: 60,
				cTimer: null,
				code: '',
				event: 'mobilelogin', // mobilelogin 验证码登录  register 用户注册   resetpwd 找回密码   binding 绑定手机号
			};
		},
		onLoad(option) {
			if(option.type) {
				this.type = option.type
			}
			// 获取scene参数作为邀请码
			if(option.scene) {
				this.invite_code = option.scene
			}
			if(option.invite_code) {
				this.invite_code = option.invite_code
				this.ifRegister = true
				this.event = 'register'
			}
		},
		methods: {
			onKeyInput: function(e) {
				this.submitDisabled = false
			},
			retrieve() {
				this.$wanlshop.to(`retrieve?url=${this.pageroute}`);
			},
			startTimer() {
				if (this.cTimer == null) {
					this.cTimer = setInterval(() => {
						this.countdown--;
						if (this.countdown == 0) {
							this.clearTimer();
						}
					}, 1000)
				}
			},
			clearTimer() {
				clearInterval(this.cTimer);
				this.cTimer = null;
			},
			resend() {
				this.startTimer();
				this.code = '';
				this.currentFocus = 0;
				this.countdown = 60;
				this.sendMessage();
			},
			// async 
			async sendMessage() {
				if (!this.account) return this.$wanlshop.msg('请输入验证码');
				await uni.request({
					url: '/wanlshop/sms/send',
					method: 'POST',
					data: {
						event: this.event,
						mobile: this.account
					},
					success: res => {
						this.$wanlshop.msg('验证码发送成功');
						this.startTimer();
					}
				});

				// this.$wanlshop.msg('验证码发送成功');
				// this.startTimer();
			},
			async getConfig(id) {
				await uni.request({
					url: `${this.$config.vehicleurl}/addons/ask/api.user/index`,
					method: 'get',
					data: {
						id: id
					},
					success: ret => {
						this.$u.vuex('vuex_user', ret.data.user);
						this.$u.vuex('vuex_isAdmin', ret.data.isAdmin);
					}
				});

				await uni.request({
					url: `${this.$config.vehicleurl}/addons/ask/api.common/config`,
					method: 'get',
					success: res => {
						//主题做缓存
						let theme_key = md5Libs.md5(JSON.stringify(res.data.theme));
						this.$u.vuex('vuex_theme', {
							key: theme_key,
							value: res.data.theme
						});
						this.$u.vuex('vuex_config', res.data);
					}
				});
			},
			formReset() {
				this.invite_code = '';
				this.account = '';
				this.password = '';
				this.pay_pass = '';
				this.code = '';
			},
			async login() {
				// console.log(this.event, this.type, this.loginType)
				uni.showLoading();
				// 密码登录
				if (this.type == 1 && this.loginType == 1) {
					//定义表单规则
					var rule = [{
							name: 'account',
							checkType: 'phoneno',
							errorMsg: '请输入正确手机号'
						},
						{
							name: 'password',
							checkType: 'string',
							checkRule: '6,12',
							errorMsg: '密码应为6-12个字符'
						}
					];
					//进行表单检查
					var formData = {
						account: this.account,
						password: this.password,
					};
					var checkRes = graceChecker.check(formData, rule);
					if (checkRes) {
						this.ws.logout()
						uni.request({
							url: '/wanlshop/user/login',
							method: 'POST',
							data: {
								account: formData.account,
								password: formData.password,
								invite_code: this.invite_code,
								// client_id: uni.getStorageSync("wanlshop:chat_client_id")?uni.getStorageSync("wanlshop:chat_client_id") : null
							},
							// 1.1.8升级
							success: res => {
								this.$store.dispatch('user/login', res.data);
								this.$store.dispatch('user/setToken', res.data.userinfo.token);
								this.$store.dispatch('cart/login');
								this.$store.dispatch('chat/get');
								this.ws.init(res.data.userinfo.im.token, res.data.userinfo.im.auth_token)
								this.$wanlshop.msg('登录成功');
								setTimeout(function() {
									uni.reLaunch({
										url: this.pageroute ? decodeURIComponent(this
											.pageroute) : '/pages/index'
									});
								}, 2000);
								this.$u.vuex('vuex_token', res.data.userinfo.token);
								this.$store.dispatch('community/setToken', res.data.userinfo.token)
								this.getConfig(res.data.userinfo.user_id)
							}
						});
					} else {
						this.$wanlshop.msg(graceChecker.error);
					}
					return false;
				}

				// 找回密码
				// if (this.event == 'resetpwd') {
				// 	this.$wanlshop.to(`resetpwd?mobile=${this.mobile}&captcha=${this.code}`);
				// 	uni.hideLoading();
				// }
				// 验证码登录
				if (this.event == 'mobilelogin' && this.type == 1 && this.loginType == 2) {
					//定义表单规则
					var rule = [{
							name: 'account',
							checkType: 'phoneno',
							errorMsg: '请输入正确手机号'
						},
						{
							name: 'captcha',
							checkType: 'notnull',
							errorMsg: '请输入验证码'
						},
					];
					//进行表单检查
					var formData = {
						account: this.account,
						captcha: this.code,
					};
					var checkRes = graceChecker.check(formData, rule);
					if (checkRes) {
						await uni.request({
							url: '/wanlshop/user/mobilelogin',
							method: 'POST',
							data: {
								mobile: this.account,
								captcha: this.code,
								invite_code: this.invite_code,
								// client_id: uni.getStorageSync("wanlshop:chat_client_id")?uni.getStorageSync("wanlshop:chat_client_id") : null
							},
							success: res => {
								uni.hideLoading();
								// 中央控制总线
								
								this.$store.dispatch('user/login', res.data);
								this.$store.dispatch('user/setToken', res.data.userinfo.token);
								this.$store.dispatch('cart/login');
								this.$store.commit('getUserInfo', res.data.userinfo)
								this.$wanlshop.msg('登录成功');
								this.$u.vuex('vuex_token', res.data.userinfo.token);
								this.ws.init(res.data.userinfo.im.token, res.data.userinfo.im.auth_token)
								setTimeout(function() {
									uni.reLaunch({
										url: this.pageroute ? decodeURIComponent(this
											.pageroute) : '/pages/index'
									});
								}, 2000);
								this.$u.vuex('vuex_token', res.data.userinfo.token);
								this.$store.dispatch('community/setToken', res.data.userinfo.token)
								this.getConfig(res.data.userinfo.user_id)
							}
						});
					} else {
						this.$wanlshop.msg(graceChecker.error);
					}
				}
				// 用户注册
				if (this.event == 'register' && this.type == 2) {
					//定义表单规则
					var rule = [{
							name: 'account',
							checkType: 'phoneno',
							errorMsg: '请输入正确手机号'
						},
						{
							name: 'password',
							checkType: 'string',
							checkRule: '6,16',
							errorMsg: '密码至少6位'
						},
						// {
						// 	name: 'pay_pass',
						// 	checkType: 'string',
						// 	checkRule: '6,6',
						// 	errorMsg: '支付密码为6位'
						// },
						{
							name: 'captcha',
							checkType: 'notnull',
							errorMsg: '请输入验证码'
						},
					];
					//进行表单检查
					var formData = {
						account: this.account,
						password: this.password,
						pay_pass: this.pay_pass,
						captcha: this.code,
					};
					var checkRes = graceChecker.check(formData, rule);
					if (checkRes) {
						await uni.request({
							url: '/wanlshop/user/register',
							method: 'POST',
							data: {
								mobile: this.account,
								captcha: this.code,
								invite_code: this.invite_code,
								// client_id: uni.getStorageSync("wanlshop:chat_client_id") ? uni.getStorageSync("wanlshop:chat_client_id") : null,
								password: this.password,
								// pay_pass: this.pay_pass,
							},
							success: res => {
								uni.hideLoading();
								// 中央控制总线
								this.$store.dispatch('user/login', res.data);
								this.$store.dispatch('user/setToken', res.data.userinfo.token);
								this.$store.dispatch('cart/login');
								this.$store.commit('getUserInfo', res.data.userinfo)
								// this.$store.dispatch('chat/get');
								this.$wanlshop.msg('注册成功')
								setTimeout(() => {
									if(this.ifRegister) {
										location.href = this.$store.state.common.appConfig.android_url
									} else {
										uni.reLaunch({
											url: this.pageroute ? decodeURIComponent(this.pageroute) :
												'/pages/index'
										});
									}
								}, 1500);
								this.$u.vuex('vuex_token', res.data.userinfo.token);
								this.$store.dispatch('community/setToken', res.data.userinfo.token)
								// this.success(res.data.userinfo.user_id,2);
								this.getConfig(res.data.userinfo.user_id)
							}
						});
					} else {
						this.$wanlshop.msg(graceChecker.error);
					}
				}
			}
		}
	};
</script>

<style lang="less">
	page {
		height: 100%;
		background-color: #fff;
	}

	.wanlshop-container {
		position: relative;
		height: 100%;

		.container {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			// height: 100%;
			>image {
				width: 168rpx;
				height: 168rpx;
				margin-top: 60rpx;
				opacity: 0.8;
			}

			.tab {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 100%;
				margin-top: 52rpx;

				view {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					width: calc(100% / 2);

					&.cur {
						text {
							color: #4CBD66;
						}
					}

					image {
						width: 113rpx;
						height: 27rpx;
						// position: absolute;
						// bottom: -40rpx;
					}

					button {
						background-color: transparent;
						margin: 0;
						padding: 0;
						border: none;
						border-radius: none;
						outline: none;
						display: inline-block;
						height: 48rpx;
						font-size: 34rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: rgba(76, 189, 102, 0.6);
						line-height: 48rpx;

						&::after {
							border: unset;
							margin: 0;
							padding: 0;
						}
					}
				}
			}

			form {
				width: 100%;
				// height: calc(100% - 365rpx);
				// position: absolute;
				// bottom: 0;
			}

			.form {
				background-color: #fff;
				width: 100%;
				height: 100%;
				border-radius: 50rpx 50rpx 0 0;
				padding: 100rpx 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.item {
					width: 100%;
					margin-bottom: 34rpx;

					&:last-child {
						margin-bottom: 0 !important;
					}

					.title {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						padding-left: 22rpx;

						image {
							width: 28rpx;
							margin-right: 12rpx;
						}

						text {
							font-size: 34rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #4CBD66;

							line-height: 48rpx;
						}
					}

					.input {
						border-bottom: 1px solid rgba(130, 170, 127, 0.3);
						padding: 20rpx 42rpx 14rpx 62rpx;

						input {
							font-size: 32rpx;
						}

						.placeholder-class {
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #AAAAAA;
							line-height: 44rpx;
						}

						text {
							font-size: 26rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #4CBD66;
							line-height: 36rpx;
							&.time {
								color: #AAAAAA;
							}
						}
					}
				}

				.tips {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 50rpx;
					text,
					button {
						background-color: transparent;
						margin: 0;
						padding: 0;
						border: none;
						border-radius: none;
						outline: none;
						display: inline-block;

						&::after {
							border: unset;
							margin: 0;
							padding: 0;
						}

						font-size: 26rpx;
						font-family: PingFang SC-Medium,
						PingFang SC;
						font-weight: 500;
						color: #4CBD66;
						line-height: 36rpx;
					}
				}

				.btn {
					outline: none;
					width: 486rpx;
					height: 72rpx;
					background: #4CBD66;
					border-radius: 36rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 72rpx;
					margin-top: 50rpx;

					&::after {
						border: none;
					}
				}
			}
		}
	}
</style>